<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<style>
    /*
        块级元素独占一行
        块级元素可以设置具体的宽高,可以设置内外边距,默认宽度是父级的100%,高度默认是内容的高度
        比如我在<div>标签里边输入了很多文字，最终发现文字是会换行显示的，这是为什么？不是说独占一行嘛
        因为浏览器有默认的css样式，如果把这个样式清除了，就能一行显示了。 white-space: nowrap

        文字类元素<p><div>不能放块元素。比如:p标签里边不能放div标签,浏览器里边将这个标签拆开并列展示了,同时多加了一个空的p标签
    */
    .block {
        height: 100px;
        background-color: pink;
    }

    /* 
        行内元素 一行共存多个 设置宽高属性后 宽高属性不生效 宽高由内容撑开
        行内元素 添加margin和padding属性 垂直方向不生效，水平方向生效。
        行内元素只能容纳文本或者其他行内元素
        非要改的话，可以使用line-height撑开行高
    */
    .inline {
        width: 400px;
        height: 800px;
        background-color: green;
        font-size: 30px;
    }


    /*
        行内块元素常见的有有哪些
        <img> <input> <button> <select> <textarea>
        行内块元素的特点
        既拥有行内元素的特点又拥有块元素的特性,两个行内块之间有缝隙，默认宽度是内容的宽度
        1.并排显示：和行内元素类似，多个行内块元素可以在同一行中并排显示，而不会自动换行。
        2.支持宽高设置：和块级元素类似，行内块元素可以设置 width、height、padding、margin 等尺寸和间距属性。
        3.不占满整行：块级元素会占满一行，而行内块元素不会。它只会根据其内容和设置的宽度占据相应的空间。
        4.对齐方式：默认情况下，行内块元素是与文本基线对齐的，这意味着它们可以和文本、其他行内元素在同一行中对齐。
    */
    .inline-block {
        width: 100px;
        height: 100px;
    }

</style>

<body>
<h1 class="block">标题标签属于块元素</h1>
<p class="block">段落标签属于块元素</p>
<div class="block" style="white-space: nowrap">div属于块标签div属于块标签div属于块标签div属于块标签div属于块标签</div>

<span class="inline">aaaaaaaaaaaaaaa</span>

<input class="inline-block">
</body>

</html>